<template>
 <div class='recommendWarp'>
    <div class='title'>周末去哪儿玩 </div>
    <ul>
        <template v-for='item of weekendList'>
         <li class="item-warper border-bottom" :key='item.id'>
            <div class='item-img-wraper'>
                <img class='item-img' :src="item.imgUrl" alt="">
            </div>
            <div class="item-right">
                <p class='item-info'>{{item.title}}</p>
                <p class='item-desc'>{{item.desc}}</p>
             </div>  
          </li>
        </template>
    </ul>
 </div>
</template> 

<script>
export default{
    name:'HomeWeekend',
    props: {
        weekendList: Array
    }
    }
</script>

<style lang="stylus" scoped>
@import '~@styles/mixins.styl'
.recommendWarp
 height auto
 width:100%

 .title
  text-align left
  text-indent 0.1rem
  height .6rem
  line-height 0.6rem
  background-color #eee

.item-img-wraper
 overflow hidden
 height 0
 padding-bottom 37.09%

.item-img
   width 100%

.item-right
 padding .1rem
 text-align left
 min-width 0

.item-right>p
 
.item-info
 line-height .54rem
 font-size .32rem
 ellipsis()

.item-desc
 font-size 0.28rem!important
 color #ccc

</style>